<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css"> -->
    <link rel="shortcut icon" href="./bitbug_favicon.ico" />
    <link rel="stylesheet" href="./css/无敌代码.css">
    <link rel="stylesheet" href="./font_z73k9iyjp7r/iconfont.css">
    <link rel="stylesheet" href="./css/detail.css">
</head>
<body>
    <!-- 头部 -->
  <div class="header">
    <div class="header-box">
        <ul>&nbsp;
            <li class="header-r"><a href="#"> </a></li>
            <li class="header-r1"><a href="#">资质证照/协议规则</a></li>
            <li class="header-r2"><a href="#"><span class="header-p"></span>下载app</a><span class="header-1">|</span></li>
            <li><a href="#">帮助中心</a><span class="header-1">|</span></li>
            <li class="logininfo"><a href="./登录.html"><span class="dl">登录</span></a>&nbsp;&nbsp;&nbsp;<a href="./注册.html"><span class="zc">注册</span></a><span class="header-1">|</span></li>
        </ul> 
    </div>
</div>
<!-- logo -->
<div class="plate1 zzh">
    <div class="logo"><a href="./小米有品.html"><img src="./imgs/logo.png"></a></div>
    <div class="plate1-p1"><a href="javascript:;"><h3>限时抢购</h3></a></div>
    <div class="plate1-p2"><a href="javascript:;"><h3>企业采购</h3></a></div>
    <div class="plate1-p3"><span class="iconfont icon-fangdajing"></span></div>
    <p class="plate1-p5">搜一搜</p>
    <a href="./cart.html"><div class="plate1-p4 btn-danger"><span class="iconfont icon-gouwuche"></span></div></a>
</div>
<div class="box3">
    <div class="enlarge fl">
        <div class="box">
            <img src="./imgs/saodi.png" alt="">
            <div class="mask"></div>
            <div class="big">
                <img src="./imgs/shou.jpg" alt="">
            </div>
        </div>
        <div class="small">
            <img class="active" src="./imgs/shui.jpg" alt="">
            <img src="./imgs/shui.jpg" alt="">
            <img src="./imgs/toukui.jpg" alt="">
        </div>
    </div>
    <div class="goodsinfo fl">
        <div class="goodsname">
            商品名称：<span>xxx</span>
        </div>
        <p box3-p1>
            <span>更多：</span>
            <span class="p1-s">开学迎新 爆品“价”到 好物1元秒杀</span>
            
        </p>
        <div class="goodssprice">
            商品价格：<span class="price3">￥</span><span class="price1">xxx</span>
                     <span class="price3">起</span><span class="price2">xxx</span>
        </div>
        <div class="fuwu">
            <h5>服务</h5>
            <div>
                <a href=""></a><span>包邮</span>
            </div>
            <div>
                <a href=""></a><span>三方店铺</span>
            </div>
            <div>
                <a href=""></a><span>七天无理由</span>
            </div>
        </div>
        <div class="peisong">
            <p>配送区域：北京&nbsp;北京市&nbsp;海淀区</p>
        </div>
        

    </div>
    <div class="shopbtn">
        <button class="shoping">加入购物车</button>
        <button class="addcart">立即购买</button>
    </div>
    <!-- <button>结算</button> -->
</div>
<div class="footer">
    <div class="footer-l fl">
        <ul>
            <li class="active">详情</li>
            <li class="off">评论</li>
        </ul>
        <ol>
        <li class="active">
            <img src="./imgs/xq1.jpg" alt="">
            <img src="./imgs/xq2.jpg" alt="">
            <img src="./imgs/xq3.jpg" alt="">
            <img src="./imgs/xq4.jpg" alt="">
            <img src="./imgs/xq5.jpg" alt="">
            <img src="./imgs/xq6.jpg" alt="">
            <img src="./imgs/xq7.jpg" alt="">
            <img src="./imgs/xq8.jpg" alt="">
            <img src="./imgs/xq9.jpg" alt="">
            <img src="./imgs/xq10.jpg" alt="">
            <img src="./imgs/xq11.jpg" alt="">
            <img src="./imgs/xq12.jpg" alt="">
            <img src="./imgs/xq13.jpg" alt="">
            <img src="./imgs/xq14.jpg" alt="">
            <img src="./imgs/xq15.jpg" alt="">
        </li>
        
        <li class="plbtn">
            <span class="btn-s">满意%99</span>
            <a href="javascript:;" class="btn-a">全部(1480)</a>
            <a href="javascript:;" class="btn-a">有图(748)</a>
            <a href="javascript:;" class="btn-a">好评(255)</a>
            <a href="javascript:;" class="btn-a">价格优惠(369)</a>
            <a href="javascript:;" class="btn-a">颜值够高(211)</a>
            <a href="javascript:;" class="btn-a">屏幕清晰(999)</a>
            <a href="javascript:;" class="btn-a">服务一流(110)</a>
            <a href="javascript:;" class="btn-a">速度较快(110)</a>
            <a href="javascript:;" class="btn-a">做工精湛(110)</a>
            <a href="javascript:;" class="btn-a">运行稳定(110)</a>
            <a href="javascript:;" class="btn-a">手感一流(110)</a>
        </li>
        <li class="no" style="display: block; margin-top: 20px;">
            <div class="pl-1">
                <div class="ps"><img src="./imgs/pl1.png" alt=""></div>
                <div class="pl-2">
                    <h4>果*丫</h4>
                    <p>2021-08-25 08:53|P1：15.6英寸/intel四核J4125/8G/512G</p>
                </div>
            </div>
            <div class="pl-p">
                用了几天才来评价的，开机好快的，真的超级快，还有没任何声音，运行时也没噪音，很流畅很漂亮收好也很好，玩游戏也很快不卡，上次买的笔记本用了七八年，希望这个也能用这么久。屏幕清晰，价格实惠，颜值高操作简单
            </div>
            <div class="photo">
                <img src="./imgs/bao.jpg" alt="">&nbsp;&nbsp;&nbsp;
                <img src="./imgs/biao.jpg" alt="">&nbsp;&nbsp;&nbsp;
                <img src="./imgs/jiu.jpg" alt="">&nbsp;&nbsp;&nbsp;
                <img src="./imgs/cha.jpg" alt="">
            </div>
        </li>
        <hr>
        <li class="no" style="display: block; margin-top: 20px;">
            <div class="pl-1">
                <div class="ps"><img src="./imgs/qq (1).png" alt=""></div>
                <div class="pl-2">
                    <h4>张*豪</h4>
                    <p>2021-08-24 11:53|P1：15.6英寸/intel四核J4125/8G/512G</p>
                </div>
            </div>
            <div class="pl-p">
                用了几天才来评价的，开机好快的，真的超级快，还有没任何声音，运行时也没噪音，很流畅很漂亮收好也很好，玩游戏也很快不卡，上次买的笔记本用了七八年，希望这个也能用这么久。屏幕清晰，价格实惠，颜值高操作简单
            </div>
            <div class="photo">
                <img src="./imgs/pijiu.jpg" alt="">&nbsp;&nbsp;&nbsp;
                <img src="./imgs/erji.png" alt="">&nbsp;&nbsp;&nbsp;
                <img src="./imgs/dfq.png" alt="">&nbsp;&nbsp;&nbsp;
                <img src="./imgs/jiandao.png" alt="">
            </div>
        </li>
        <hr>
        <li class="no" style="display: block; margin-top: 20px;">
            <div class="pl-1">
                <div class="ps"><img src="./imgs/wx (1).png" alt=""></div>
                <div class="pl-2">
                    <h4>李*</h4>
                    <p>2021-08-20 09:50&nbsp;&nbsp;|&nbsp;&nbsp;P1：15.6英寸/intel四核J4125/8G/512G</p>
                </div>
            </div>
            <div class="pl-p">
                用了几天才来评价的，开机好快的，真的超级快，还有没任何声音，运行时也没噪音，很流畅很漂亮收好也很好，玩游戏也很快不卡，上次买的笔记本用了七八年，希望这个也能用这么久。屏幕清晰，价格实惠，颜值高操作简单
            </div>
            <div class="photo">
                <img src="./imgs/juzi.jpg" alt="">&nbsp;&nbsp;&nbsp;
                <img src="./imgs/saodi.png" alt="">&nbsp;&nbsp;&nbsp;
                <img src="./imgs/shou.jpg" alt="">&nbsp;&nbsp;&nbsp;
                <img src="./imgs/shui.jpg" alt="">
            </div>
        </li>
    </ol>
    </div>
    <div class="footer-r fr">
        <div class="footer-r-top">
            <img src="./imgs/ps.jpg" alt="">
            <p><span>攀升</span>锻造一精品，十亿人相约</p>
            <button>进入</button>
        </div>
        <div class="top-p1">——&nbsp;&nbsp;相关推荐&nbsp;&nbsp;——</div>

        <div class="r-box1" style="width:260px; height:310px; text-align: center; border: 1px solid #f4f4f4;">
            <a href="javascript:;"><div class="goodsimg">
                <img src="./imgs/pijiu.jpg" alt="">
                <p>啤酒</p>
            </div></a>
            <div class="jiage">
                <span class="jiage-1"></span>￥<span class="jiage-2">199</span>
            </div>
            
        </div>

    </div>
</div>
<div class="plate8 cnm">
    <div class="plate8-l">
        
    </div>
    <div class="plate8-r">
        <a href=""><img src="./imgs/logo.png" alt=""></a>
        <div class="plate8-rp">
            <a href=""><img src="./imgs/chengxing.png" alt=""></a>
        </div>
        <div class="plate8-p">
            <p>
                <span>©xiaomiyoupin.com</span>
                <span>苏B2-20180351 苏ICP备18025642号-1</span>
                <img src="./imgs/huizhang.png" alt="">
                <span>苏公网安备32010502010244号</span>
            </p>
            <p>
                <span>企业名称：有品信息科技有限公司</span>
                <span>关于我们</span>
                <span>入驻有品</span>
                <span>知识产权侵权投诉</span>
            </p>
            <p>
                <span>平台运营资质证照</span>
                <span>医疗器械网络交易服务第三方平台备案凭证</span>
            </p>
            <p>
                <span>小米有品平台运营主体变更公告</span>
            </p>
            <p>
                <span>南京市建邺区白龙江东街8号3栋9层</span>
            </p>
        </div>
    </div>

</div>
<div class="m-fixedBar">
    <ul>
        <li>
            <a href="" class="m-icons yi"></a>
            <p>联系客服</p>
            <div class="m-1">
                <p>小米有品平台问题，建议反馈商户和物流问题投诉等请拨打小米有品
                    客服热线
                    </p>
                    <p class="m-1p">400-100-1199</p>
                    <p>(周—至周日8: 00-22: 00)</p>
                    <p>小米/米家自营品牌，手机电视智能硬件商品或订单发货/退款售后问题
                        请拨打小米自营客服热线
                        </p>
                        <p class="m-1p">400-100-5678</p>
                    <p>(周—至周日8: 00-18: 00)</p>
            </div>
        </li>
        <li>
            <a href="" class="m-icons er"></a>
            <p>下载app</p>
            <div class="m-2">
                <img src="./imgs/erweima.png" alt="">
                <p>下载小米有品APP</p>
                <p>得新人礼包</p>
            </div>
        </li>
        <li>
            <a href="" class="m-icons san"></a>
            <p>新人有礼</p>
            <div class="m-3">
                <img src="./imgs/jml.png" alt="">
                <p><img src="./imgs/erweima.png" alt=""></p>
                <p>立即扫码下载·小米有品APP</p>
            </div>
        </li>
        <li>
            <a href="" class="m-icons si"></a>
            <p>关注微信</p>
            <div class="m-4">
                <img src="./imgs/erweima.png" alt="">
                <p>扫码关注「小米有品」微信服务</p>
                <p>号，签到积分赢大奖</p>
            </div>
        </li>
        <li>
            <a href="" class="m-icons wu"></a>
            <p>回&nbsp;到<br>顶&nbsp;部</p>
        </li>
    </ul>
</div>
</body>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="./js/单例模式封装工具库.js"></script>
<script src="./js/username.js"></script>
<script src="./js/enlarge.js"></script>
<script src="./node_modules/layui-layer/dist/layer.js"></script>
<script src="./js/detail.js"></script>
<script src="./js/tuijian.js"></script>
<script src="./js/home.js"></script>
<script>
class Box{
    constructor(classname){
        this.container=document.querySelector('.'+classname);
        this.ulis=this.container.querySelectorAll('ul li')
        this.olis=this.container.querySelectorAll('ol li')
    }
    init(){
        for(let i=0;i<this.ulis.length;i++){
            this.ulis[i].onclick=this.cut(i)
        }
    }
    cut(i){
        return ()=>{
            console.log(i)
            for(let j=0;j<this.ulis.length;j++){
                this.ulis[j].className=''
                this.olis[j].className=''
            }
            this.ulis[i].className='active'
            this.olis[i].className='active'
        }
    }
    
}
var t=new Box('footer-l')
t.init()
// $('.no').click(function(){
//     $('.no').hide()
// })

// $('.off').click(function(){
//     $('.no').toggle()
// })
$('.active').click(function(){
    $('.no').css({
        display:'none'
    })
})
$('.off').click(function(){
    $('.no').css({
        display:'block'
    })
})

$('.yi').hover(function(){
        $('.m-1').css({
            display:'block'
        })
    },function(){
        $('.m-1').css({
            display:'none'
        })
    })
    $('.er').hover(function(){
        $('.m-2').css({
            display:'block'
        })
    },function(){
        $('.m-2').css({
            display:'none'
        })
    })
    $('.san').hover(function(){
        $('.m-3').css({
            display:'block'
        })
    },function(){
        $('.m-3').css({
            display:'none'
        })
    })
    $('.si').hover(function(){
        $('.m-4').css({
            display:'block'
        })
    },function(){
        $('.m-4').css({
            display:'none'
        })
    })
</script>
</html>